/**
 * 规约扫描结果的规则卡片
 */

import React from 'react';
import { ENUM } from 'utils/constants.js';
import { Tag } from '@teamix/ui';
import './index.scss';
import intl from '../../locale';

export default class RuleCard extends React.Component {
  render() {
    const { rule, headerRightArea } = this.props;

    return (
      <div className="rule-card">
        <div className="rule-card-header">
          <div className="rule-card-header-left">
            <span className="rule-card-header-name">
              {intl.get(
                {
                  id: 'code-assets.components.ruleCard.EncodingProtocolRulecnruleset',
                  defaultMessage: '编码规约-{ruleCnRuleset}',
                },
                { ruleCnRuleset: rule.cn_ruleset_name },
              )}
            </span>
            <Tag color={ENUM.violation_priority_color[rule.priority]}>{rule.priority}</Tag>
          </div>
          <div className="rule-card-header-right">{headerRightArea}</div>
        </div>
        <div className="rule-card-body">{rule.violation_message}</div>
      </div>
    );
  }
}
